// MAIN LAYOUT STYLES
// ----------------------------------------------------------------------------

// Special font defined on CSS.
@font-face
    font-family fontinsans
    src url("/fonts/fontinsans.eot"), url("/fonts/fontinsans.eot?#iefix") format("embedded-opentype"), url("/fonts/fontinsans.woff") format("woff"), url("/fonts/fontinsans.ttf") format("truetype")
    font-weight normal
    font-style normal

// The main page body.
body
    font-family fontinsans
    margin 0
    text-align center

// General links.
a, a:visited
    color linkColor
    text-decoration none

// General links.
a:hover, a:active
    color hoverLinkColor

// Page titles are H2.
h2
    font-size 2.2em
    margin-top 0

// Countdown messages are H3.
h3
    font-size 1.8em

// FORMS
// ----------------------------------------------------------------------------

// Form text boxes.
input[type="text"], input[type="datetime"], input[type="email"], input[type="url"], textarea
    font-family Tahoma !important

// Input placeholder color is lighter than default.
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder
    color placeholderColor
input::-moz-placeholder,
textarea::-moz-placeholder
    color placeholderColor
input:-ms-input-placeholder,
textarea:-ms-input-placeholder
    color placeholderColor

// Form buttons.
input[type="button"], button
    cursor pointer
    &:disabled
        cursor default

// Small text.
input.small
    font-size 1.25em

// Invalid text field.
input.warn
    background-color rgba(250, 80, 60, 1)

// Styled checkboxes.
input[type="checkbox"] + span:after
input[type="radio"] + span:after
    content "no"
input[type="checkbox"]:checked + span:after
input[type="radio"]:checked + span:after
    content "yes"
input[type="checkbox"] + span
input[type="radio"] + span
input[type="checkbox"] + span:before
input[type="radio"] + span:before
input[type="checkbox"] + span:after
input[type="radio"] + span:after
    display inline-block
input[type="checkbox"] + span
input[type="radio"] + span
    font-style normal !important
    vertical-align middle
input[type="checkbox"] + span:before
input[type="radio"] + span:before
input[type="checkbox"] + span:after
input[type="radio"] + span:after
input[type="checkbox"]:checked + span:before
input[type="radio"]:checked + span:before
input[type="checkbox"]:checked + span:after
input[type="radio"]:checked + span:after
    top 0
input[type="checkbox"] + span:after
input[type="radio"] + span:after
input[type="checkbox"]:checked + span:before
input[type="radio"]:checked + span:before
    right 0
input[type="checkbox"] + span:before
input[type="radio"] + span:before
input[type="checkbox"]:checked + span:after
input[type="radio"]:checked + span:after
    left 0
input[type="checkbox"]
input[type="radio"]
input[type="checkbox"] + span:before
input[type="radio"] + span:before
input[type="checkbox"] + span:after
input[type="radio"] + span:after
    position absolute
input[type="checkbox"]
input[type="radio"]
    opacity 0
input[type="checkbox"] + span
input[type="radio"] + span
    background -moz-linear-gradient(top, #AA3322, #FF9977)
    background -webkit-linear-gradient(top, #AA3322, #FF9977)
    background -ms-linear-gradient(top, #AA3322, #FF9977)
    background linear-gradient(top, #AA3322, #FF9977)
    border 1px solid rgb(110, 110, 110)
    color rgb(250, 250, 250)
    font-family Arial, Tahoma, Helvetica, sans-serif
    position relative
    text-indent -9999px
    text-transform uppercase
input[type="checkbox"] + span:before
input[type="radio"] + span:before
    background -moz-linear-gradient(top, #CFCFCF, #F9F9F9)
    background -webkit-linear-gradient(top, #CFCFCF, #F9F9F9)
    background -ms-linear-gradient(top, #CFCFCF, #F9F9F9)
    background linear-gradient(top, #CFCFCF, #F9F9F9)
    content ""
    width 40%
input[type="checkbox"] + span:after
input[type="radio"] + span:after
    height 30px
    width 60%
    text-align center
    text-indent 0
input[type="checkbox"]:checked + span
input[type="radio"]:checked + span
    background -moz-linear-gradient(top, #55AA44, #227711)
    background -webkit-linear-gradient(top, #55AA44, #227711)
    background -ms-linear-gradient(top, #55AA44, #227711)
    background linear-gradient(top, #55AA44, #227711)
input[type="checkbox"]:disabled + span
input[type="radio"]:disabled + span
    background -webkit-linear-gradient(top, #BFBFBF, #EFEFEF)
    background linear-gradient(top, #BFBFBF, #EFEFEF)
    color rgb(200, 200, 200)
input[type="checkbox"]:checked + span:before
input[type="radio"]:checked + span:before
    left auto
input[type="checkbox"]:checked + span:after
input[type="radio"]:checked + span:after
    height 30px

// LAYOUT ELEMENTS
// ----------------------------------------------------------------------------

// The main wrapper.
#wrapper
    background rgb(255, 255, 255)
    margin auto

// The top logo / header.
#header
    margin 0 0 28px 0

    h1
        display inline-block
        background url(../images/logo.png) no-repeat right
        font-size 3.6em
        margin 2px 2px 0 0
        padding 0 48px 0 0

// The layout footer.
#footer
    background rgb(250, 250, 250)
    box-shadow 0 -5px 20px -10px rgb(60, 60, 60)
    margin 40px 0 0 0
    padding 20px 0 20px 0

    // Footer links.
    a.link
        margin 0 18px 0 18px

    // Share icons.
    img
        cursor pointer
        height 16px
        margin 0 5px 0 5px
        opacity 0.8
        width 16px

    // Icon hover opacity.
    img:hover
        opacity 1

    // Space between icons and links.
    .spacer
        display inline-block
        width 50px

// The default submit button.
#butSubmit
    margin-top 15px
    width 190px

// Styled checkboxes (toggle).
.toggle
    cursor pointer
    display inline-block
    margin 4px
    padding-bottom 4px
    vertical-align middle

// Text on the center.
.center
    text-align center

// COUNTDOWN STYLING
// ----------------------------------------------------------------------------

// The countdown digits.
.dash
    display inline-block
    height 114px
    margin 0 10px 0 10px
    position relative
    width 114px

    // The dash titles (weeks, days, hours, minutes, seconds).
    label
        display block
        font-size 60%
        margin-top 2px

    // Each dash digit.
    .digit
        background -moz-linear-gradient(top, #454545, #000000)
        background -webkit-linear-gradient(top, #454545, #000000)
        background linear-gradient(to bottom, #454545, #000000)
        border-radius 5px
        color rgb(250, 250, 250)
        float left
        font-family Arial
        font-size 46pt
        font-weight normal
        margin 1px
        position relative
        text-align center
        width 55px

// Special styling after the countdown has ended.
.over
    .digit
        color rgb(180, 180, 180)